<template>
	<view class="p_over">
		<view class="package_wrapper" v-if="!isShowData">
			<view class="p_font_28 package_title">您的压缩包文件在哪里？</view>
			<view class="p_flex7 p_font_24 p_color_7a p_margin_b_32">
				<view class="package_block" @click="getWxUp">
					<image src="https://dy.sykj365.com/uploads/mini/shangchuan2@2x.png"></image>
					<view>微信</view>
				</view>
				<view class="package_block" @click="getBendiUp">
					<image src="https://dy.sykj365.com/uploads/mini/shangchuan1@2x.png"></image>
					<view>本机</view>
				</view>
			</view>
		</view>
		<view class="p_bg_all" v-else>
			<view class="print_list" v-if="isLoadingFile">
				<view class="p_font_32" style="word-wrap: break-word;">{{loadingFileName}}</view>
				<view class="p_flex2 p_margin_t_16">
					<view class="progress_wrapper">
						<view :style="'width: ' + progress + '%'"></view>
					</view>
					<view class="p_font_24 p_color_7a p_text_r" style="width: 90rpx;">{{progress}}%</view>
				</view>
				<view class="p_flex9 p_margin_t_24">
					<view class="p_font_20 p_color_b2">{{upName}}</view>
				</view>
			</view>
			<view class="p_over p_b_128" v-else>
				<view class="p_font_28 package_t_">压缩包内共有{{listData.length}}个文件，请选择上传</view>
				<view class="print_list p_flex7"
					:class="item.type !== 'pdf' && item.type !== 'docx' && item.type !== 'doc' && item.type !== 'pptx' && item.type !== 'ppt'?'active': ''"
					v-for="(item, index) in listData" :key="index" @click="getChooseItem(item)">
					<image src="https://dy.sykj365.com/uploads/mini/xuanzhong@2x.png" class="p_img_48 p_margin_r_24"
						v-if="item.isChoose"></image>
					<image src="https://dy.sykj365.com/uploads/mini/weixuanzhong@2x.png" class="p_img_48 p_margin_r_24" v-else></image>
					<image src="https://dy.sykj365.com/uploads/mini/file@2x.png" class="p_img_64 p_margin_r_16"></image>
					<view class="p_flex_1">
						<view class="p_font_32">{{item.name}}</view>
						<view></view>
						<view class="p_font_28 p_color_ff5555 p_margin_t_8"
							v-if="item.type !== 'pdf' && item.type !== 'docx' && item.type !== 'doc' && item.type !== 'pptx' && item.type !== 'ppt'">
							暂只支持Word、Pdf、PPT</view>
					</view>
				</view>
				<bottomView btnText1="确定" :isShowPrice="false" @getSubmit="getSureSubmit">
					<view class="p_flex2">
						<view class="p_flex2 p_margin_r_16" @click="getAllChoose">
							<image src="https://dy.sykj365.com/uploads/mini/weixuanzhong@2x.png" class="p_img_48 p_margin_r_8"
								v-if="!isAll">
							</image>
							<image src="https://dy.sykj365.com/uploads/mini/xuanzhong@2x.png" class="p_img_48 p_margin_r_8" v-else>
							</image>
							<view class="p_font_26">全选</view>
						</view>
						<view class="p_font_24 p_color_7a">已选{{idsData.length}}个文件</view>
					</view>
				</bottomView>
			</view>
		</view>
	</view>
</template>

<script>
	import bottomView from '../../components/bottomView.vue';

	export default {
		components: {
			bottomView
		},
		data() {
			return {
				upName: '',
				progress: 0, // 上传进度
				listData: [], // 数据列表
				isShowData: false, // 是否显示数据
				isLoadingFile: false,
				loadingFileName: '',
				isAll: false, // 是否全选
				idsData: [], // 选中的数据
			}
		},
		onShow() {
			if(uni.getStorageSync('upLoadYasuobao')) {
				let s_ = uni.getStorageSync('upLoadYasuobao');
				console.log(s_)
				this.getZipList(s_[0].path);
				uni.removeStorageSync('upLoadYasuobao');
			}
		},
		methods: {
			getWxUp() {
				let self = this;
				uni.chooseMessageFile({
					count: 1,
					type: 'file',
					extension: ['zip'],
					success: function(res) {
						let files = res.tempFiles;
						self.getFileUp(files[0]);
					}
				})
			},
			getFileUp(e) {
				let self = this;

				if (e.size / 1024 / 1024 > 500) {
					getApp().getMsg('文件最大不超过500M');
					return;
				}

				uni.showLoading();

				this.upName = '加密上传中...';
				this.isShowData = true;
				this.isLoadingFile = true;
				this.loadingFileName = e.name;

				const uploadTask = uni.uploadFile({
					url: self.$api.upload,
					filePath: e.path,
					name: 'file',
					header: {
						"Content-Type": "multipart/form-data",
					},
					formData: {},
					success: (uploadFileRes) => {
						let result = JSON.parse(uploadFileRes.data);

						if (result.code === 20000) {
							self.upName = '解压中...';
							self.getZipList(result.data);
						} else {
							getApp().getMsg(result.msg);
						}
					},
					fail(e) {
						console.log(e)
						getApp().getMsg('上传失败');
					}
				});

				uploadTask.onProgressUpdate((res) => {
					self.progress = res.progress;
				});
			},
			getZipList(file) {
				this.$http.post(this.$api.zipList, {
					file: file.url
				}).then((res) => {
					if (res.data.length > 0) {
						res.data.forEach((n) => {
							n.isChoose = false;
							n.arr_ = n.name.split('.');
							n.type = n.arr_[n.arr_.length - 1];
							n.url = n.file;
						})

						this.upName = '';
						this.progress = 0;
						this.isShowData = true;
						this.listData = res.data;
						this.isLoadingFile = false;
						this.loadingFileName = '';
					} else {
						this.upName = '';
						this.progress = 0;
						this.isShowData = false;
						this.isLoadingFile = false;
						this.loadingFileName = '';

						getApp().getMsg('压缩包为空，请重新上传');
					}
				})
			},
			// 选择文件
			getChooseItem(item) {
				if (item.type !== 'pdf' && item.type !== 'docx' && item.type !== 'doc' && item.type !== 'pptx' && item
					.type !== 'ppt') {
					return
				}

				item.isChoose = !item.isChoose;
				this.getItemData();
			},
			getItemData() {
				this.idsData = [];
				this.listData.forEach((n) => {
					if (n.isChoose) {
						this.idsData.push(n)
					}
				})

				if (this.idsData.length === this.listData.length) {
					this.isAll = true;
				} else {
					this.isAll = false;
				}
			},
			getAllChoose() {
				this.isAll = !this.isAll;

				this.idsData = [];
				this.listData.forEach((n) => {
					if (this.isAll) {
						if (n.type === 'pdf' || n.type === 'docx' || n.type === 'doc' || n.type === 'pptx' || n
							.type === 'ppt') {
							n.isChoose = true;
							this.idsData.push(n);
						} else {
							n.isChoose = false;
						}
					} else {
						n.isChoose = false;
					}
				})
			},
			// 确定
			getSureSubmit() {
				if (this.idsData.length === 0) return getApp().getMsg('请选择上传文件');
				let self = this;
				uni.setStorageSync('yasuobaoFiles', self.idsData);
				uni.navigateBack();
			},
			// 本机
			getBendiUp() {
				getApp().getNavigateTo('/pages/index/bendiYasuobao');
			}
		}
	}
</script>

<style lang="less">
	.package_wrapper {
		margin: 32rpx;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 8rpx -6rpx 12rpx -4rpx #EEEEEE, -8rpx 6rpx 12rpx 4rpx #EEEEEE;
	}

	.package_title {
		padding: 32rpx 48rpx;
	}

	.package_t_ {
		margin: 32rpx;
	}

	.package_block {
		text-align: center;
		border: 1px solid #f4f4f4;
		border-radius: 16rpx;
		padding: 16rpx 32rpx;
		margin: 0 80rpx;

		image {
			width: 80rpx;
			height: 80rpx;
			margin: 0 auto 16rpx;
		}
	}

	.print_list {
		padding: 32rpx;
		margin: 32rpx;
		background-color: #fff;
		border-radius: 16rpx;

		&.active {
			opacity: 0.5;
		}
	}

	.progress_wrapper {
		width: 100%;
		height: 12rpx;
		border-radius: 60rpx;
		background-color: #E8E8E8;

		view {
			width: 0%;
			height: 12rpx;
			border-radius: 60rpx;
			background-color: #05B570;
		}
	}
</style>
